import Card from '@/components/Card';
import Cards from '@/components/Cards';
import {CourseVideoBanner} from '@/components/CourseBanner';

# Routing

`next-intl` integrates with Next.js' routing system in two places:

1. **Proxy / middleware**: Negotiates the locale and handles redirects & rewrites (e.g. `/` → `/en`)
2. **Navigation APIs**: Lightweight wrappers around Next.js' navigation APIs like `<Link />`

This enables you to express your app in terms of APIs like `<Link href="/about">`, while aspects like the locale and user-facing pathnames are automatically handled behind the scenes (e.g. `/de/über-uns`).

<Cards className="mt-8 max-w-[300px]">
  <Card title="Set up routing" href="/docs/routing/setup" />
  <Card title="Configuration" href="/docs/routing/configuration" />
  <Card title="Proxy / middleware" href="/docs/routing/middleware" />
  <Card title="Navigation APIs" href="/docs/routing/navigation" />
</Cards>

Prefer to watch a video?

<CourseVideoBanner
  className="mt-2"
  href="https://learn.next-intl.dev/chapters/06-routing/01-setup"
  title="Locale-based routing"
/>
